<template>
	<div id="forget">
		<div id="header">
			<img @click="$router.go(-1)" src="../../static/img/return.png"/>
			<p>忘记密码</p>
		</div>
		<img id="logo" src="../../static/img/logo-01.png"/>
		<div class="register_item">
			<input type="text" v-model="user" placeholder="请输入手机号" />
		</div>
		<div class="verification">
			<input type="text" v-model="verification" placeholder="请输入验证码" />
			<input v-show="verificationShow" @click="getCode" type="button" value="获取验证码" />
				<input v-show="!verificationShow" type="button" v-model="getVerification" />
		</div>
		<div class="register_item">
			<input type="password" v-model="password" placeholder="请输入6-16位密码" />
		</div>
		<input id="sub" @click="sub" type="button" value="提交" />
	</div>
</template>

<script>
export default{
	name:'forget',
	data:function(){
		return{
			user: '',//手机号
			verification: '',//验证码
			password: '',//密码
			keycode: '',// 加密后的手机验证码
			getVerification: '60s后重新获取',//获取验证码
			verificationShow: true,//获取验证码切换
		}
	},
	methods:{
		//--------获取验证码倒计时-------
		countDown:function(){
			var time = 60;
			var _this = this;
			_this.verificationShow = false;
			_this.getVerification = '60s后重新获取';
			var Time = setInterval(function(){
				if(time == 1){
					_this.verificationShow = true;
					time = 60;
					clearTimeout(Time);
				}else{
					time -- ;
					_this.getVerification = time + 's后重新获取';
				}
			},1000);
		},
		//--------获取验证码-------
		getCode: function(){
			var reg=11 && /^((13[0-9])|(14[5,7])|(15[0-3,5-9])|(17[0,3,5-8])|(18[0-9])|166|198|199|(147))\d{8}$/;
			if(!this.user){
				this.$alert('请输入手机号码');
				return;
			}else if(!reg.test(this.user)){
				this.$alert('请输入正确的手机号码');
				return;
			}
			this.countDown();
			var _this = this;
			
			let postData = _this.$qs.stringify({
				phone: _this.user
			});
			_this.$axios.post("/sms/public/phoneCode", postData).then(function(res){
				var data = res.data;
				if(data.message == "succ"){
					_this.keycode = res.data.result;
					_this.$alert("发送成功");
				}else{
					_this.$alert("发送失败");
					console.log(res.data.result);
				} 
			}).catch(function(err){
				console.log(err);
			});
		},
		//---------提交----------
		sub:function(){
			if(!this.keycode){
				this.$alert('请获取验证码');
			}else if(!this.verification){
				this.$alert('请输入验证码');
			}else if(!this.password){
				this.$alert('请输入密码');
			}else if(this.password.length < 6 || this.password.length > 16){
				this.$alert('请输入6-16位密码');
			}else{
				this.forgetPwd();
			}
		},
		//--------忘记密码-------
		forgetPwd: function(){
			var _this = this;
			_this.$loading();
			let postData = _this.$qs.stringify({
				phone: _this.user,
				code: _this.verification,
				password: _this.password,
				keycode: _this.keycode,
			});
			_this.$axios.post("/user/autho/public/forgetPwd", postData).then(function(res){
				var data = res.data;
				if(data.message == "succ"){
					_this.$alert("密码重置成功");
					$("#loading").remove();
					setTimeout(function(){
						_this.$router.push('/login');
					}, 1000)
				}else{
					_this.$alert(data.result);
				}
			}).catch(function(err){
				console.log(err);
			});
		}
	}
}
</script>

<style scoped>
/* ========== */
/* = Header = */
/* ========== */
#header{
	width: 100%;
	background-color: #fff;
	position: fixed;
	top: 0;
	left: 0;
	height: 4rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border-bottom: 1px solid #EEEEEE;
	font-size: 1.6rem;
	color: #4F4F4F;
	box-sizing: border-box;
	z-index: 10;
}
#header img{
	height: 2rem;
	display: block;
	position: absolute;
	top: 1rem;
	left: 2rem;
}
#forget{
	height: 100%;
	padding-top: 5rem;
	box-sizing: border-box;
	background-color: #fff;
}
#logo{
	width: 40%;
	display: block;
	margin: 4rem auto;
}
.register_item{
	width: 90%;
	margin: 0 auto;
	display: flex;
	align-items: center;
	border-bottom: 1px solid #EEEEEE;
	height: 4rem;
	padding: 0 1rem;
	box-sizing: border-box;
}
/*.register_item img{
	height: 1.4rem;
	display: block;
	margin-right: 1rem;
}*/
.register_item input{
	width: 100%;
	border: none;
	height: 100%;
	font-size: 1.2rem;
}
.verification{
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 1rem;
	border-bottom: 1px solid #EEEEEE;
	height: 4rem;
	width: 90%;
	margin: 0 auto;
	box-sizing: border-box;
}
.verification input[type='text']{
	width: calc(100% - 8rem);
	border: none;
	height: 100%;
	font-size: 1.2rem;
}
.verification input[type='button']{
	height: 2.2rem;
	border: 1px solid #FF6565;
	border-radius: 50px;
	box-sizing: border-box;
	width: 8rem;
	color: #FF6565;
	background-color: #fff;
}
#sub{
	width: 80%;
	margin: 0 auto;
	height: 4rem;
	border-radius: 50px;
	background-color: #FF6565;
	color: #FFFFFF;
	font-size: 1.4rem;
	border: none;
	display: block;
	margin: 0 auto;
	margin-top: 3rem;
}
</style>